<template>
  <div class="diyView">
    <!--侧边栏-->
    <div class="Sidebar" ref="Sidebar">
      <ul>
        <li
          v-for="value in Sidebar"
          :key="value.id"
          @click="active(value.path, value.id)"
          :class="{ active: actNum === value.id }"
        >
          {{ value.title }}
        </li>
      </ul>
    </div>
    <div class="triangle" @click="SlideOut" ref="triangle">
      <div class="inTriangle" ref="inTriangle"></div>
    </div>
    <!--左侧展示-->
    <div class="left-show">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "DiyView",
  data() {
    return {
      //侧边栏词条
      Sidebar: [
        {
          id: 0,
          title: "AI生成",
          path: "ai",
        },
        {
          id: 1,
          title: "自由创作",
          path: "diy-create",
        },
        {
          id: 2,
          title: "热门花束",
          path: "diy-popular",
        },
      ],
      SlideOutBoole: true,
    };
  },
  methods: {
    active(path, id) {
      this.$router.push({
        path: `/diy/${path}`,
      });

      this.$store.commit("changeActNum", id);

      this.SlideOut();
    },
    SlideOut() {
      if (this.SlideOutBoole) {
        this.$refs.Sidebar.style.left = "0px";
        this.$refs.triangle.style.left = "320px";
        this.$refs.inTriangle.style.transform = "rotate(180deg)";
        this.SlideOutBoole = false;
      } else {
        this.$refs.Sidebar.style.left = "-320px";
        this.$refs.triangle.style.left = "0px";
        this.$refs.inTriangle.style.transform = "rotate(0deg)";
        this.SlideOutBoole = true;
      }
    },
  },
  computed: {
    actNum() {
      return this.$store.state.actNum;
    },
  },

  mounted() {
    this.$router.push({
      path: `/diy/ai`,
    });
  },
};
</script>

<style scoped>
.diyView {
  min-height: 85vh;
  display: flex;
  align-items: center;
  position: relative;
}
.Sidebar {
  background: linear-gradient(135deg, #ffb6c1 0%, #ffe4e1 100%);
  box-shadow: 0 8px 32px 0 rgba(255, 111, 158, 0.25), 0 1.5px 8px 0 rgba(0,0,0,0.08);
  height: 100%;
  width: 300px;
  border-radius: 16px;
  margin-left: 20px;
  position: absolute;
  left: -300px;
  transition: 0.3s all linear;
  z-index: 99;
  border: 2px solid #ff6f9e;
}
.triangle {
  width: 40px;
  height: 100px;
  position: absolute;
  background: linear-gradient(135deg, #ffb6c1 0%, #ffe4e1 100%);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  left: 20px; /* 这里改为300px */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s all linear;
  z-index: 99;
  box-shadow: 0 8px 32px 0 rgba(255, 111, 158, 0.18), 0 1.5px 8px 0 rgba(0,0,0,0.06);
  border: 2px solid #ff6f9e;
}

.triangle .inTriangle {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 22px solid #ff6f9e;
  transition: 0.3s all linear;
  filter: drop-shadow(0 2px 6px #ffb6c1);
}
.Sidebar ul {
  list-style: none;
  margin: 20px;
}
.Sidebar ul li {
  margin: 16px 0;
  height: 60px;
  border-radius: 12px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  color: #e75480;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(255, 111, 158, 0.08);
}

.Sidebar ul li:hover {
  background: #ffe1ec;
  color: #ff3380;
  box-shadow: 0 4px 16px rgba(255, 111, 158, 0.15);
}

.active {
  color: #fff;
  background: linear-gradient(90deg, #ff6f9e 0%, #ffb6c1 100%);
  box-shadow: 0 4px 16px rgba(255, 111, 158, 0.25);
  border: 2px solid #fff;
}
.left-show {
  width: 100%;
  height: 100%;
}
</style>